<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工列表页面</title>
    <link rel="stylesheet" href="./js/bootstrap-4.4.1-dist/css/bootstrap.min.css">
    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
</head>

<body>
    <div id="app">
        <div class="container">
            <div class="form-group">
                <div class="input-group">
                    <h4>员工列表</h4>
                </div>
                <button type="button" class="btn btn-danger btn-xs" @click="showAddEmpDiv">新增</button>
            </div>
            <table class="table table-bordered table-hover mt-2">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>职位</th>
                        <th>联系方式</th>
                        <th>邮箱</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(emp,index) in emps" :key="emp.employeeId">
                        <td>{{emp.employeeId}}</td>
                        <td>{{emp.empName}}</td>
                        <td>{{emp.position}}</td>
                        <td>{{emp.phoneNumber}}</td>
                        <td>{{emp.email}}</td>
                        <td>
                            <button type="button" class="btn btn-primary btn-xs"
                                @click="getEmpById(emp.employeeId)">修改</button>
                            <button type="button" class="btn btn-danger btn-xs" @click="del(emp.employeeId)">删除</button>
                        </td>
                    </tr>
                    <tr v-if="emps.length === 0">
                        <td colspan="6" style="text-align: center">暂无数据</td>
                    </tr>
                </tbody>
            </table>
            <div class="row" v-if="showDiv">
                <form>
                    <div class="form-group">
                        <div class="form-group" v-if="showEmpId">
                            <label for="">用户编号</label>
                            <input type="text" class="form-control" id="" disabled v-model="emp.employeeId" />
                        </div>
                        <div class="form-group">
                            <label for="exampleInputLoginName">登录名</label>
                            <input type="text" class="form-control" id="exampleInputLoginName" placeholder="请输入登录名"
                                v-model="emp.loginName" />
                        </div>
                        <div class="form-group">
                            <label for="">用户名称</label>
                            <input type="text" class="form-control" id="" placeholder="请输入用户名称" v-model="emp.empName" />
                        </div>
                        <div class="form-group">
                            <label for="">密码</label>
                            <input type="text" class="form-control" id="" placeholder="请输入密码" v-model="emp.password" />
                        </div>
                        <div class="form-group">
                            <label for="">职位</label>
                            <input type="text" class="form-control" id="" placeholder="请输入职位" v-model="emp.position" />
                        </div>
                        <div class="form-group">
                            <label for="">联系电话</label>
                            <input type="text" class="form-control" id="" placeholder="请输入联系电话"
                                v-model="emp.phoneNumber" />
                        </div>
                        <div class="form-group">
                            <label for="">邮箱</label>
                            <input type="email" class="form-control" id="" placeholder="请输入邮箱" v-model="emp.email" />
                        </div>
                        <div class="form-group">
                            <label for="">工资</label>
                            <input type="text" class="form-control" id="" placeholder="请输入工资" v-model="emp.salary" />
                        </div>
                        <button type="button" class="btn btn-info" @click="editEmp">保存</button>
                    </div>
                </form>
            </div>
            <!-- 分页控件 -->
            <nav aria-label="Page navigation example">
                <ul class="pagination justify-content-center">
                    <li class="page-item" :class="{disabled: currentPage === 1}">
                        <a class="page-link" href="#" @click.prevent="changePage(currentPage - 1)">上一页</a>
                    </li>
                    <li class="page-item" v-for="n in totalPages" :key="n" :class="{active: n === currentPage}">
                        <a class="page-link" href="#" @click.prevent="changePage(n)">{{ n }}</a>
                    </li>
                    <li class="page-item" :class="{disabled: currentPage === totalPages}">
                        <a class="page-link" href="#" @click.prevent="changePage(currentPage + 1)">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</body>

</html>
<script>
    // 创建实例时设置配置的默认值
    var http = axios.create({
        baseURL: 'http://localhost:8080',
        timeout: 5000,
    });

    // 在实例已创建后修改默认值
    http.defaults.headers.common['Auth_token'] = "123456";

    new Vue({
        el: '#app',
        data: {
            emp: {},
            emps: [],
            pageNum: 1,
            empName: '',
            phoneNumber: '',
            showDiv: false,
            showEmpId: false,
            currentPage: 1,  // 当前页码
            totalPages: 1,   // 总页数
        },
        methods: {
            // 删除按钮
            del(id) {
                if (confirm('确定删除吗？')) {
                    http.delete('/employees/' + id)
                        .then(resp => {
                            // 删除成功
                            this.getEmpList();
                        })
                        .catch(error => {
                            console.error(error);
                        });
                }
            },
            // 点击修改按钮
            getEmpById(id) {
                http.get('/employees/' + id)
                    .then((res) => {
                        if (!res.data.status) {
                            alert(res.data.message);
                        } else {
                            this.emp = res.data.data;
                            this.showDiv = true;
                            this.showEmpId = true;
                        }
                    });
            },
            // 点击保存按钮
            editEmp() {
                if (this.emp.employeeId != null) {
                    http.put("/employees", this.emp).then(res => {
                        alert(res.data.message);
                    });
                } else {
                    // 新增功能
                    http.post('/employees', this.emp)
                        .then((res) => {
                            if (!res.data.status) {
                                alert(res.data.message);
                            } else {
                                alert(res.data.message);
                            }
                        });
                }
                // 页面加载，调用方法
                this.getEmpList();
                this.emp = {};
                this.showDiv = false;
                this.showEmpId = false;
            },
            // 点击新增按钮
            showAddEmpDiv() {
                this.showDiv = true;
            },
            // 获取列表数据
            getEmpList() {
                http.get('/employees/page', {
                    params: {
                        pageNum: this.currentPage,
                        pageSize: 5,  // 每页显示的数量
                        empName: this.empName,
                        phoneNumber: this.phoneNumber,
                    }
                })
                    .then(res => {
                        console.log(res);
                        if (!res.data.status) {
                            alert(res.data.message);
                        } else {
                            this.emps = res.data.data.list;
                            this.totalPages = res.data.data.pages;  // 总页数
                        }
                    })
                    .catch(error => {
                        console.error(error);
                    });
            },
            // 处理分页
            changePage(page) {
                console.log('Changing page to:', page);  // 调试日志
                console.log(this.totalPages);  // 调试日志
                if (page >= 1 && page <= this.totalPages) {
                    console.log(this); 
                    this.currentPage = page;
                    this.getEmpList();
                }
            }
        },
        // Vue实例初始化调用
        created() {
            // 页面加载，调用方法
            this.getEmpList();
        },
    })
</script>